<template>
    <el-card shadow="never" :body-style="{ padding: '20px' }">
        <div style="margin-bottom: 14px;">
            <el-button type="primary" @click="open = true">添加分组</el-button>
        </div>

        <el-table size="large" :data="tableData.rows" :header-cell-style="{
            backgroundColor: '#e5eeff', color: '#515a6e', fontWeight: 'normal'
        }">
            <!-- 直接渲染数据 -->
            <el-table-column prop="_id" label="ID" width="250" />
            <el-table-column prop="name" label="分组" />
            <!-- 需要往当前列中插入其他标签、或需要对数据进行其他处理时 -->
            <el-table-column label="操作" width="200" align="center">
                <!-- 以插槽的方式插入其他标签 -->
                <template #default="scope">
                    <el-button type="primary" text @click="openUpdateDialog(scope.row)">
                        修改
                    </el-button>
                    <el-button type="primary" text>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="page-container">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[10, 20, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.total" />
        </div>
    </el-card>

    <el-dialog v-model="open" :title="dialogTitle" width="500" destroy-on-close>
        <el-form ref="ruleFormRef" :model="groupItem" :rules="rules" label-width="auto" status-icon
            style="margin-top: 10px;">
            <el-form-item label="分组名称" prop="name">
                <el-input v-model="groupItem.name" placeholder="请输入分组名称" />
            </el-form-item>
        </el-form>
        <!-- 弹窗的右下角的按钮 -->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="open = false">取消</el-button>
                <el-button type="primary" @click="open = false">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import type { FormRules } from 'element-plus'
import api from '../../api';

interface RuleForm {
    name: string
}

interface UserGroupItem {
    id: string;
    name: string;
}

const open = ref(false);
// 表单双向数据绑定的对象
const groupItem = ref<UserGroupItem>({ id: '', name: '' })
// 定义表单的验证规则
const rules = reactive<FormRules<RuleForm>>({
    // 针对表单中的name属性，来设置验证规则
    name: [
        // 必填项
        { required: true, message: '分组名称不能为空', trigger: 'blur' }
    ],
});

const tableData = reactive({
    rows: [],
    total: 0
})

const pageData = ref({
    currentPage: 1,
    pageSize: 10
})

const dialogTitle = computed(() => {
    if (groupItem.value.id) {
        return '修改分组'
    }
    return '新增分组'
})

// 侦听弹窗的状态
watch(open, () => {
    if (!open.value) {
        groupItem.value = { id: '', name: '' };
    }
})

watch(pageData, () => {
    getGroupData();
}, {
    deep: true
})

const openUpdateDialog = (item: UserGroupItem) => {
    open.value = true;
    // 将当前要修改的数据回显到表单中
    groupItem.value = { ...item };
}

onMounted(() => {
    getGroupData();
})

const getGroupData = async () => {
    const res = await api.userGroups.search(pageData.value);
    console.log(res);

    if (res.code == 200) {
        
        tableData.rows = res.data.rows;
        tableData.total = res.data.total;
    }
}


</script>

<style scoped>
.page-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>